<script>
import BookControl from "@/components/BookRead/BookControl";
import { useBookread } from "/stores/bookread";
import {
  computed,
  onBeforeMount,
  onBeforeUnmount,
  onBeforeUpdate,
  onMounted,
  ref,
} from "vue";
import { useRoute, useRouter } from "vue-router";
import { getBookreadJsonData, getBookreadData } from "/assets/api/bookread.js";
import { Toast, ImagePreview } from "vant";
export default {
  components: { BookControl },
  setup() {
    // 状态中心
    const bookreadStore = useBookread();
    // console.log(bookreadStore);

    let route = null;
    let router = null;
    let id = ref(0);

    // 控制台入口 点击事件
    let BookReadClick = (e) => {
      // console.log(e);
      if (e.x > 375 / 3 && e.x < (375 / 3) * 2) {
        console.log("点击中间");
        bookreadStore.showControlMain();
      }

      if (e.x > 0 && e.x < 375 / 3) {
        console.log("点击左边");
        ContextRef.value.scrollTop = 0;
        bookreadStore.goPage(-1, e);
      }

      if (e.x > (375 / 3) * 2 && e.x < 375) {
        console.log("点击右边");
        ContextRef.value.scrollTop = 0;
        bookreadStore.goPage(1, e);
      }
    };

    // 顶部滚动条联动 滚轮 事件
    let topTransitionEve = (e) => {
      // 获取内容视口的高度
      let viewHeight = e.target.offsetHeight;
      // 获取内容实际的高度
      let contentHeight = e.target.firstElementChild.offsetHeight;
      // 计算出高度差
      let dHeight = contentHeight - viewHeight;
      // 获取滚动的top值
      let scrollTop = e.target.scrollTop;
      // 计算出比值
      let scrollRatio = scrollTop / dHeight;

      if (scrollRatio < 0) scrollRatio = 0;
      else if (scrollRatio > 1) scrollRatio = 1;

      bookreadStore.$patch({ scrollRatio });
      // console.log(scrollRatio);
    };

    // 高亮块 段落 滚轮 事件
    let middleFocusHighlightedEve = (e) => {
      // console.dir(e.target.scrollTop);

      // 获取内容视口的高度
      let contentHeight = e.target.offsetHeight;
      // 获取滚动的top值
      let scrollTop = e.target.scrollTop;
      // 获取滚动的top值 在中间位置的top
      let middleScrollTop = scrollTop + contentHeight / 2;
      // 获取所有子节点
      let children = e.target.firstElementChild.children;

      // 取消所有的阴影
      for (let j = 0; j < children.length; j++)
        children[j].style.textShadow = "none";

      // 再单独上阴影
      for (let i = 0; i < children.length - 1; i++) {
        if (middleScrollTop < children[i + 1].offsetTop) {
          children[i].style.textShadow = "0px 0px 30px";
          // console.log(children[i].innerText);
          bookreadStore.$patch({ keyword: children[i].innerText });
          break;
        }
      }
    };

    // 无缝加载 向下
    let updateRenderEve = (e) => {
      // 获取内容视口的高度
      let viewHeight = e.target.offsetHeight;
      // 获取内容实际的高度
      let contentHeight = e.target.firstElementChild.offsetHeight;
      // 计算出高度差
      let dHeight = contentHeight - viewHeight;
      // 获取滚动的top值
      let scrollTop = e.target.scrollTop;

      // 判断是否到底了
      if (scrollTop >= dHeight - 100) {
        console.log("到底了");
        Toast("到底了");
      }
    };

    // 定义ref 服务于内容试图滚轮事件
    let ContextRef = ref(null);
    let ContextBoxRef = ref(null);

    // 初始化滚轮事件
    let __ContentScrollInit = () => {
      // console.log(ContextRef);
      ContextRef.value.onscroll = async (e) => {
        // 顶部滚动条联动 滚轮 事件
        topTransitionEve(e);

        // 高亮块 段落 滚轮 事件
        middleFocusHighlightedEve(e);

        // 无缝加载
        updateRenderEve(e);

        // 时间更新
        timeUpdate(e);

        // console.log(bookreadStore.current);
      };
    };

    // 清楚滚轮事件
    let __ContentScrollDestroy = () => {
      ContextRef.value.onscroll = null;
    };

    // 初始化书本 全本
    let bookInit = async () => {
      let BookId = route.params.BookId;

      id.value = BookId;

      // 重定向
      BookId = 104216;

      // console.log("书本id", BookId);
      let data = await getBookreadData().catch(() =>
        console.log("接口调用失败")
      );
      if (!data) data = await getBookreadJsonData();
      // console.log(data);
      let index = data.bookList.findIndex((item) => item.BookId == BookId);
      if (index == -1) return router.go(-1);
      data.bookList[index].reverseList = JSON.parse(
        JSON.stringify(data.bookList[index].list)
      );

      // 反转数组
      data.bookList[index].reverseList.reverse();

      bookreadStore.$patch({ book: data.bookList[index] });
      // console.log(bookreadStore.book);
    };

    //放回上一页
    let goBack = () => {
      // console.log(router);
      router.go(-1);
    };

    // 阅读配置读取
    let readInit = () => {
      let userinfo = JSON.parse(localStorage.getItem("userinfo"));

      // 没有记录直接结束
      if (!userinfo.bookread) return;

      // 取出数据
      let obj = userinfo.bookread;

      // 赋值进去
      bookreadStore.$patch(obj);
    };

    // 书本配置读取
    let bookConfigInit = () => {
      let BookId = route.params.BookId;

      // 重定向
      BookId = 104216;

      // 本地取数据
      let bookConfig = JSON.parse(localStorage.getItem("bookConfig"));

      // 没有记录直接结束
      if (!bookConfig) return;

      // 获取下标
      let index = bookConfig.findIndex((item) => item.BookId == BookId);

      // 没有这本书记录直接结束
      if (index == -1) return;

      // 得到那本书的数据
      let obj = bookConfig[index];

      // 更新这本书的数据
      bookreadStore.$patch(obj);
    };

    // 数据持久化 读取
    let dataPersistenceRead = () => {
      // 阅读配置
      readInit();

      // 书本配置读取
      bookConfigInit();
    };

    // 阅读配置更新
    let readUpdate = () => {
      // 本地取数据
      let userinfo = JSON.parse(localStorage.getItem("userinfo"));

      // 重新赋值进去
      userinfo.bookread = {
        autoSubscribeChecked: bookreadStore.autoSubscribeChecked,
        brightValue: bookreadStore.brightValue,
        scrollRatio: bookreadStore.scrollRatio,
        lineHeight: bookreadStore.lineHeight,
        lettterSpacing: bookreadStore.lettterSpacing,
        size: bookreadStore.size,
        family: bookreadStore.family,
        theme: bookreadStore.theme,
        hsObj: bookreadStore.hsObj,
      };

      // 更新本地数据
      localStorage.setItem("userinfo", JSON.stringify(userinfo));
    };

    // 书本配置更新
    let bookConfigUpdate = () => {
      let BookId = route.params.BookId;

      // 重定向
      BookId = 104216;

      // 本地取数据
      let bookConfig = JSON.parse(localStorage.getItem("bookConfig"));

      // 没有记录 给他赋值
      if (!bookConfig) bookConfig = [];

      // 过滤掉当前书本的数据
      bookConfig = bookConfig.filter((item) => item.BookId != BookId);

      // 添加多一条数据
      bookConfig.push({
        BookId,
        payList: bookreadStore.payList,
        downloadList: bookreadStore.downloadList,
        historyList: bookreadStore.historyList,
        current: bookreadStore.current,
        markList: bookreadStore.markList,
        rateFreeValue: bookreadStore.rateFreeValue,
        rateFreeFlag: bookreadStore.rateFreeFlag,
        rateMoneyValue: bookreadStore.rateMoneyValue,
        ModifyList: bookreadStore.ModifyList,
      });

      // 更新本地数据
      localStorage.setItem("bookConfig", JSON.stringify(bookConfig));
    };

    // 数据持久化 写入
    let dataPersistenceWrite = () => {
      // 阅读配置更新
      readUpdate();

      // 书本配置更新
      bookConfigUpdate();
    };

    // 添加书架的历史记录
    let historyInit = () => {
      console.log("添加书架的历史记录和浏览记录");

      // 本地取数据
      let userinfo = JSON.parse(localStorage.getItem("userinfo"));

      // 库中取书本状态
      let current = bookreadStore.current;
      let reading = current + 1;
      let readingTitle = bookreadStore.book.list[current].title;
      let latest = bookreadStore.book.list.length;
      let latestTitle = bookreadStore.book.list[latest - 1].title;

      let BookId = bookreadStore.book.BookId;
      let BookName = bookreadStore.book.BookName;
      let BookImage = bookreadStore.book.BookImage;
      let Author = bookreadStore.book.Author;
      let isEnd = bookreadStore.book.isEnd;

      let lastTime = new Date().getTime();

      // 书架专属操作
      // 如果在书架内 把书提前至第一位
      BookId = id.value;
      if (userinfo.bookcase.some((item) => item.BookId == BookId)) {
        console.log("书本置顶");

        // 把摆放第一位的位置空出来  true为单独摆放  false为多个规则摆放
        if (userinfo.bookcase.length) {
          let index = userinfo.bookcase.findIndex((item) => item.recent);
          userinfo.bookcase[index].recent = false;
        }

        let target = null;
        let targetHistory = null;

        // 防止出现两个斗罗书
        if (BookId != bookreadStore.book.BookId) {
          // 书架记录

          // 取下标
          let index = userinfo.bookcase.findIndex(
            (item) => item.BookId == BookId
          );
          // 去重并取对象
          let temp = userinfo.bookcase.splice(index, 1);
          target = temp[0];
          // 只修改以下属性
          target.recent = true;

          // 历史记录
          // 取下标
          let indexHistory = userinfo.history.findIndex(
            (item) => item.BookId == BookId
          );

          // 去重并取对象
          let tempHistory = userinfo.history.splice(indexHistory, 1);
          targetHistory = tempHistory[0];

          // 头部添加多一条最新数据
          targetHistory.lastTime = true;
        } else {
          // 去重
          userinfo.bookcase = userinfo.bookcase.filter(
            (item) => item.BookId != BookId
          );

          target = {
            reading,
            readingTitle,
            latest,
            latestTitle,
            recent: true,
            BookId,
            BookName,
            BookImage,
            Author,
            isEnd,
          };

          userinfo.history = userinfo.history.filter(
            (item) => item.BookId != BookId
          );

          // 头部添加多一条最新数据
          targetHistory = {
            BookId,
            BookName,
            BookImage,
            Author,
            isEnd,
            lastTime,
          };
        }

        // 头部添加多一条最新数据
        userinfo.history.unshift(targetHistory);
        userinfo.bookcase.unshift(target);
        console.log(userinfo.bookcase);
      }

      // 写入存储
      localStorage.setItem("userinfo", JSON.stringify(userinfo));
    };

    // 右上角时间
    let newTime = ref("17:15");

    // 时间更新
    let timeUpdate = () => {
      let date = new Date();
      let h = date.getHours();
      let m = date.getMinutes();
      newTime.value = `${h < 10 ? "0" + h : h}:${m < 10 ? "0" + m : m}`;
    };

    // 图片预览
    let ImagePreviewFun = (images, startPosition = 0) => {
      ImagePreview({ images, closeable: true, startPosition });
    };

    // 是否为会员
    let isVip = ref(false);

    // 检测是否为会员
    let isVipInit = () => {
      let userinfo = JSON.parse(localStorage.getItem("userinfo"));
      isVip.value = userinfo.isVip;
    };

    // 数据更新前
    onBeforeUpdate(() => {
      timeUpdate();
    });

    // 挂载前
    onBeforeMount(() => {
      // 路由初始化
      route = useRoute();
      router = useRouter();

      // 检测是否为会员
      isVipInit();

      // 初始化书本 全本
      bookInit();

      // 数据持久化 读取
      dataPersistenceRead();

      // 阅读一本书
      let Read = JSON.parse(window.localStorage.getItem("Read"));
      if ((Read && Read.one == "0/1") || (Read && Read.two == "0/1")) {
        Read.one = "1/1";
        Read.two = "1/1";
        window.localStorage.setItem("Read", JSON.stringify(Read));
      }
    });

    // 挂载后
    onMounted(() => {
      __ContentScrollInit();
    });

    // 销毁前
    onBeforeUnmount(() => {
      // 数据持久化 写入
      dataPersistenceWrite();

      // 添加书架的历史记录
      historyInit();

      // 滚轮事件清除
      __ContentScrollDestroy();
    });

    return {
      // 评论弹窗方法
      CommentPopFlag: computed({
        get: () => bookreadStore.CommentPopFlag,
        set: (v) => (bookreadStore.CommentPopFlag = v),
      }),
      isVip, // 是否为vip
      ImagePreviewFun, //图片预览方法
      newTime, //更新时间
      BookReadClick, // 控制中心点开入口
      ContextRef, // 内容试图原生对象
      ContextBoxRef, // 内容原生对象
      scrollRatio: computed(() => bookreadStore.scrollRatio), // 滚动条比值
      hsObj: computed(() => bookreadStore.hsObj), // 主题
      brightValue: computed(() => bookreadStore.brightValue), //亮度
      lineHeight: computed(() => bookreadStore.lineHeight), // 行高
      lettterSpacing: computed(() => bookreadStore.lettterSpacing), // 间距
      size: computed(() => bookreadStore.size), // 大小
      family: computed(() => bookreadStore.family), // 样式
      goBack, //放回上一页
      book: computed(() => bookreadStore.book), // 全书本数据
      current: computed(() => bookreadStore.current), //看到的章节
      contentObj: computed(() => {
        if (!bookreadStore.book.list.length) return [];
        // console.log(bookreadStore.book.list[bookreadStore.current]);
        let res = {};
        let index = bookreadStore.ModifyList.findIndex(
          (item) =>
            item.title == bookreadStore.book.list[bookreadStore.current].title
        );
        if (index != -1) res = bookreadStore.ModifyList[index];
        else res = bookreadStore.book.list[bookreadStore.current];
        return res;
      }),
    };
  },
};
</script>

<template>
  <!-- <div class="line"></div> -->
  <div class="BookRead">
    <div
      class="title"
      :style="{
        'background-color': `hsl(${hsObj.bgColor.h}, ${hsObj.bgColor.s}%, ${brightValue}%)`,
        color: `hsl(${hsObj.color.h}0, ${hsObj.color.h}%, ${
          100 - brightValue
        }%)`,
      }"
    >
      <div class="left" @click="goBack">
        <p class="iconfont icon-xiangzuo1"></p>
        <p class="book-name text-ellipsis-1" v-if="book.list[current]">
          {{ book.list[current].title }}
        </p>
      </div>

      <div class="scroll">
        <div
          class="mark"
          :style="`left:calc(${scrollRatio}  * (100% - 50px));`"
        >
          <img src="/assets/img/scroll.gif" alt="" />
        </div>
        <!-- <div class="end"><img src="/assets/img/end.gif" alt="" /></div> -->
      </div>

      <div class="right">
        <div class="time">{{ newTime }}</div>
      </div>
    </div>
    <div
      class="content"
      @click="BookReadClick"
      ref="ContextRef"
      :style="{
        'background-color': `hsl(${hsObj.bgColor.h}, ${hsObj.bgColor.s}%, ${brightValue}%)`,
        color: `hsl(${hsObj.color.h}0, ${hsObj.color.h}%, ${
          100 - brightValue
        }%)`,
      }"
    >
      <div class="content-box" v-if="contentObj" ref="ContextBoxRef">
        <div
          v-for="(item, i) in contentObj.contentList"
          :key="i"
          :style="{
            'line-height': `${lineHeight}em`,
            'lettter-spacing': `${lettterSpacing}px`,
            'font-size': `${size}px`,
            'font-family': `${family}`,
          }"
        >
          <div v-if="isVip">
            <div class="only-text" v-if="item.type == 'only-text'">
              <span>
                {{ item.content }}
              </span>
            </div>

            <div
              class="tImg-bText-title"
              v-if="item.type == 'tImg-bText-title'"
            >
              <div class="pic" @click.stop="ImagePreviewFun([item.pic])">
                <img :src="item.pic" />
              </div>
              <div class="text">
                <strong>{{ item.title }}</strong>
              </div>
            </div>

            <div class="tImg-bText" v-if="item.type == 'tImg-bText'">
              <div class="pic" @click.stop="ImagePreviewFun([item.pic])">
                <img :src="item.pic" alt="" />
              </div>
              <div class="text">
                {{ item.content }}
              </div>
            </div>

            <div class="lImg-rText" v-if="item.type == 'lImg-rText'">
              <div class="pic" @click.stop="ImagePreviewFun([item.pic])">
                <img :src="item.pic" alt="" />
              </div>
              <div class="text">
                {{ item.content }}
              </div>
            </div>

            <div class="bText-sImg-l" v-if="item.type == 'bText-sImg-l'">
              <div class="pic" @click.stop="ImagePreviewFun([item.pic])">
                <img :src="item.pic" alt="" />
              </div>
              <div class="text">
                {{ item.content }}
              </div>
            </div>

            <div class="bText-sImg-r" v-if="item.type == 'bText-sImg-r'">
              <div class="pic" @click.stop="ImagePreviewFun([item.pic])">
                <img :src="item.pic" alt="" />
              </div>
              <div class="text">
                {{ item.content }}
              </div>
            </div>

            <div class="bText-sImg-c" v-if="item.type == 'bText-sImg-c'">
              <div class="text-l">
                <div class="pic" @click.stop="ImagePreviewFun([item.pic])">
                  <img :src="item.pic" alt="" />
                </div>
                {{ item.content.substr(0, parseInt(item.content.length / 2)) }}
              </div>
              <div class="text-r">
                {{
                  item.content.substr(
                    parseInt(item.content.length / 2),
                    Math.ceil(item.content.length / 2)
                  )
                }}
              </div>
            </div>
          </div>

          <div v-if="!isVip">
            <div class="only-text">
              <strong>{{ item.title }}</strong>
              <span>
                {{ item.content }}
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div
      :class="['barrage', { hide: CommentPopFlag }]"
      @click="CommentPopFlag = true"
    >
      <van-swipe
        class="barrage-swipe"
        vertical
        :style="{ height: '108px' }"
        autoplay="3000"
        :show-indicators="false"
      >
        <van-swipe-item
          class="item"
          v-for="item in contentObj.commentList"
          :key="item.id"
        >
          <div class="item-box">
            <div class="icon-name">
              <img class="icon" :src="item.user.avatar" alt="" />
              <span class="name">{{ item.user.nickname }}</span
              >：
            </div>
            <div class="comment">
              {{
                item.content.length > 36
                  ? item.content.substr(0, 36) + "."
                  : item.content
              }}
            </div>
          </div>
        </van-swipe-item>
        <div class="empty" v-if="!contentObj.commentList">
          <p><span class="iconfont icon-pinglun1"></span>暂无评论</p>
          <p><small>快来抢一楼</small></p>
        </div>
      </van-swipe>
    </div>

    <!-- 控制中心 -->
    <BookControl />
  </div>
</template>

<style lang="scss" scoped>
.line {
  position: fixed;
  top: 36px;
  bottom: 0;
  margin: auto;
  width: 100%;
  height: 1px;
  background-color: red;
  z-index: 20;
}
.BookRead {
  min-height: 100%;

  .title {
    display: flex;
    height: 40px;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    .left {
      display: flex;
      align-items: center;
      max-width: 130px;
      .iconfont {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-color: #ced0dc;
        color: #f4f6f6;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 12px;
        flex-shrink: 0;
      }
      .book-name {
        font-size: 12px;
        color: #9696a3;
        margin-left: 6px;
      }
    }

    .scroll {
      position: relative;
      flex: 1;
      margin: 0 15px;
      height: 40px;
      &::after {
        content: "";
        position: absolute;
        bottom: 5px;
        height: 0;
        left: 0;
        right: 0;
        box-shadow: 0 0 1px 1px rgba($color: #000000, $alpha: 0.1);
      }
      .mark {
        position: absolute;
        top: 0;
        bottom: 0;
        margin: auto;
        left: 0;
        width: 50px;
        height: max-content;
        transition: all 0.3s ease;
        img {
          display: block;
        }
      }
      .end {
        position: absolute;
        top: 0;
        bottom: 0;
        margin: auto;
        right: 0;
        width: 36px;
        height: max-content;
        img {
          display: block;
        }
      }
    }

    .right {
      .time {
        font-size: 12px;
        color: #9696a3;
      }
    }
  }

  .content {
    position: absolute;
    top: 40px;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-x: hidden;
    overflow-y: scroll;

    &::-webkit-scrollbar,
    &::-webkit-scrollbar-thumb {
      width: 0;
      height: 0;
    }

    .content-box {
      height: max-content;
      // 防止塌陷 1px
      padding: 1px 16px;
    }

    .only-text,
    .tImg-bText,
    .lImg-rText,
    .bText-sImg-l,
    .bText-sImg-r,
    .bText-sImg-c {
      text-indent: 2em;
      margin-top: 10px;
      line-height: 1.8em;
      word-break: break-all;
      opacity: 0.9;

      &.focus {
        font-weight: bold;
        opacity: 1;
      }

      strong {
        font-size: 22px;
      }
    }

    .tImg-bText-title {
      margin-top: 10px;
    }

    .tImg-bText {
      .pic {
        padding: 5px;
      }
      .text {
        text-indent: 2em;
        padding: 5px;
      }
    }

    .lImg-rText {
      width: 100%;
      margin-top: 10px;

      &::after {
        content: "";
        display: block;
        clear: both;
      }

      .pic {
        padding: 5px;
        box-sizing: border-box;
        margin-right: 5px;
        width: 40%;
        height: 260px;
        float: left;
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
      .text {
        // float: left;
        text-indent: 2em;
        padding: 5px;
        box-sizing: border-box;
      }
    }

    .bText-sImg-l {
      margin-top: 10px;

      &::after {
        content: "";
        display: block;
        clear: both;
      }

      .text {
        text-indent: 2em;
        text-align: justify;
      }

      .pic {
        height: max-content;
        width: 100px;
        float: left;
        margin-right: 5px;
        margin-bottom: 5px;
        padding: 5px;
        position: relative;
        box-sizing: border-box;
        img {
          display: block;
          width: 100%;
        }
      }
    }

    .bText-sImg-r {
      margin-top: 10px;

      &::after {
        content: "";
        display: block;
        clear: both;
      }

      .text {
        text-indent: 2em;
        text-align: justify;
      }

      .pic {
        height: max-content;
        width: 100px;
        float: right;
        margin-left: 5px;
        margin-bottom: 5px;
        padding: 5px;
        position: relative;
        box-sizing: border-box;
        img {
          display: block;
          width: 100%;
        }
      }
    }

    .bText-sImg-c {
      margin-top: 10px;
      display: table;

      &::after {
        content: "";
        display: block;
        clear: both;
      }

      .text-l,
      .text-r {
        text-indent: 2em;
        text-align: justify;
        display: table-cell;
        padding: 5px;
        box-sizing: border-box;

        &.text-l {
          padding-right: 10px;
        }
        &.text-r {
          padding-left: 10px;
          &::before {
            content: "";
            float: left;
            width: 60px;
            margin-top: 115px;
          }
        }
      }

      .pic {
        height: max-content;
        width: 100px;
        height: 100px;
        float: right;
        padding: 5px;
        position: relative;
        box-sizing: border-box;
        margin-top: 5px;
        margin-right: -70px;
        margin-left: 10px;
        margin-bottom: 10px;
        img {
          display: block;
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
    }

    .vip-con {
      .pic {
        display: none;
      }
    }
  }

  .barrage {
    position: absolute;
    top: 70px;
    left: 0;
    width: max-content;
    height: max-content;
    max-width: 60%;
    transition: all 0.3s ease;

    &.hide {
      left: -100%;
    }

    .barrage-swipe {
      .item {
        box-sizing: border-box;
        line-height: 22px;
        color: #fff;
        padding: 10px;
        .item-box {
          border-radius: 5px;
          background-color: rgba($color: #000000, $alpha: 0.4);
        }
        &::after {
          content: "";
          display: block;
          clear: both;
        }
        .icon-name {
          display: flex;
          align-items: center;
          height: 22px;
          color: #ff0;
          float: left;
          border-radius: 11px;
          padding: 0 5px;
          background-color: rgba($color: #000000, $alpha: 0.1);

          .icon {
            display: block;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            margin-right: 5px;
          }
          .name {
            display: block;
          }
        }
      }
      .empty {
        line-height: 22px;
        .iconfont {
          font-size: 20px;
        }
      }
    }
  }
}
</style>